<script setup lang='ts'>
import { onMounted, ref } from 'vue'
const defaultImgUrl = ref("")
const imgList: string[] = [
    "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0828%2F5a2863a7j00six00d000hd200a6009yg00a6009y.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
    "https://img2.baidu.com/it/u=1344414611,1414589098&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=285",
    "http://img1.baidu.com/it/u=3615554588,1533818780&fm=253&app=138&f=JPEG?w=500&h=555",
    "http://img1.baidu.com/it/u=3288390176,2781953877&fm=253&app=138&f=JPEG?w=520&h=500",
    "http://img2.baidu.com/it/u=2294394091,1356641831&fm=253&app=138&f=JPEG?w=500&h=666",
    "https://pic.rmb.bdstatic.com/bjh/64e266aecf8d34763a497514e6d7a7b22954.jpeg@h_1280",
    "https://q8.itc.cn/q_70/images01/20240204/2f89f0d12c0f4d76bf50b6e7b56ab368.jpeg",
    "https://img2.baidu.com/it/u=1894203907,2858592961&fm=253&fmt=auto&app=138&f=JPEG?w=682&h=612"
]
onMounted(() => {
    changeImg()
})
// 切换图片
const changeImg = () => {
    defaultImgUrl.value = imgList[~~(Math.random() * imgList.length)]
}
</script>

<template>
    <div class="container">
        <img :src="defaultImgUrl">
        <button @click="changeImg">切换图片</button>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    text-align: center;
    margin: 100px auto;
}

.container img {
    width: 300px;
    height: 300px;
}
</style>